import React from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import { withStyles } from 'material-ui/styles'
import { inject, observer } from 'mobx-react'
import TextField from 'material-ui/TextField'
import Radio from 'material-ui/Radio'
import Button from 'material-ui/Button'
import SimpleMDE from 'react-simplemde-editor';
import Helmet from 'react-helmet'

// import IconReply from 'material-ui-icons/Reply'

import UserStore from '../../stores/user_store'

import style from './style'
import tabs from '../../constant/tabs'

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class PostTopic extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topicTitle: '',
      tab: '',
      content: '',
    }
    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleChangeTab = this.handleChangeTab.bind(this)
    this.post = this.post.bind(this)
    this.handleChangeContent = this.handleChangeContent.bind(this)
  }
  componentDidMount() {
    this.checkUser()
  }
  checkUser() {
    const { user, history, location } = this.props
    if (user.isLogin) {
      return
    }
    const path = `/login/${encodeURIComponent(location.pathname)}`
    history.push(path)
  }
  handleTitleChange(e) {
    this.setState({
      topicTitle: e.target.value,
    })
  }
  handleChangeTab(e) {
    this.setState({
      tab: e.target.value,
    })
  }
  handleChangeContent(content) {
    this.setState({
      content,
    })
  }
  // 发布话题
  post() {
    const { topicTitle, content, tab } = this.state
    const { postTopic } = this.props.user
    const param = {
      title: topicTitle,
      content,
      tab,
    }
    postTopic(param).then((res) => {
      const url = `/topic-detail/${res}`
      this.props.history.push(url)
    }).catch(msg => alert(msg))
  }
  render() {
    const { classes, action } = this.props
    const title = action === 'edit' ? '编辑话题' : '发表新话题'
    return (
      <div className={classes.root}>
        <Helmet>{title}</Helmet>
        <Button raised className={classes.submitButton} color="accent" onClick={this.post}>发表</Button>
        <div>
          <TextField
            className={classes.title}
            label="标题"
            value={this.state.topicTitle}
            onChange={this.handleTitleChange}
            fullWidth
          />
        </div>
        <SimpleMDE
          onChange={this.handleChangeContent}
          value={this.state.textValue}
          options={{
            autofocus: false,
            spellChecker: false,
            toolbar: false,
            // etc.
          }}
        />
        <div className={classes.category}>
          {
            Object.keys(tabs).map((tab) => {
              if (tab !== 'all' && tab !== 'good') {
                return (
                  <span className={classes.selectItem} key={tab}>
                    <Radio
                      value={tab}
                      checked={tab === this.state.tab}
                      onChange={this.handleChangeTab}
                    />
                    {tabs[tab]}
                  </span>
                )
              }
              return null
            })
          }
        </div>
      </div>
    )
  }
}
export default withRouter(withStyles(style)(PostTopic))

PostTopic.propTypes = {
  classes: PropTypes.objectOf(Object),
  user: PropTypes.instanceOf(UserStore),
  history: PropTypes.objectOf(Object),
  location: PropTypes.objectOf(Object),
  action: PropTypes.string,
}

